
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Divider} from 'react-native-elements';
import Request from '../../common/request';
import Config from '../../common/config';
import Toast from 'react-native-root-toast';

class ForumScreen extends React.Component {

  state = {
    loading: false,
    taxonomies: [],
  }

  componentDidMount() {
    this.fetchForumtaxonomies();
  }

  fetchForumtaxonomies() {
    Request.get(Config.api.forumtaxonomy).then((response) => {
      console.log(response);
      if (response.ret == 0) {
        this.setState({taxonomies: response.data.list});
      }
    })
  }

  showForumList = (forumtaxonomy) => {
    this.props.navigation.navigate("ForumMainPopList", {forumtaxonomy});
  }

  renderForumtaxonomies() {
    let results = [];
    this.state.taxonomies.map((item, i) => {
      results.push(
        <TouchableOpacity key={item.key} style={styles.forumtaxonomyItem} onPress={() => {this.showForumList(item)}}>
          <Icon name={item.icon} size={30}/>
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )
    })
    return results;
  }

  render() {
    let Taxonomies = this.renderForumtaxonomies();
    return (
      <View style={styles.container}>
        <View style={styles.forumtaxonomyWrap}>
          {Taxonomies}
        </View>
        <Divider style={{backgroundColor: "#ddd", marginTop: 10, marginBottom: 10}}/>
        <View style={styles.sectionTitleWrap}>
          <View style={styles.sectionTitleDivider}></View>
          <Text style={styles.sectionTitle}>常去的版块</Text>
        </View>
        <View style={styles.myForumsWrap}>
          <View style={styles.myForumItem}><Text>明珠</Text></View>
          <View style={styles.myForumItem}><Text>新悦</Text></View>
          <View style={styles.myForumItem}><Text>桃源</Text></View>
          <View style={styles.myForumItem}><Text>平安国际酒店</Text></View>
          <View style={styles.myForumItem}><Text>九龙湾</Text></View>
          <View style={styles.myForumItem}><Text>小可</Text></View>
          <View style={styles.myForumItem}><Text>富临国际大酒店</Text></View>
          <View style={styles.myForumItem}><Text>喜来登喜悦</Text></View>
        </View>
        
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 15,
    backgroundColor: "#fff"
  },
  forumtaxonomyWrap: {
    display: "flex",
    flexDirection: "row",
    marginTop: 20
  },
  forumtaxonomyItem: {
    flexGrow: 1,
    alignItems: "center"
  },
  myForumsWrap: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  myForumItem: {
    backgroundColor: "#eee",
    padding: 10,
    marginRight: 5,
    marginTop: 5
  },
  sectionTitleWrap: {
    display: "flex",
    flexDirection: "row",
    marginBottom: 5
  },
  sectionTitleDivider: {
    height: 18,
    backgroundColor: "blue",
    width: 4,
    marginRight: 6
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold"
  }
})

module.exports = ForumScreen;